<template>
    <dv-border-box7 :color="['#0D3568', '#49ACD6']" backgroundColor="" style="margin-top: 15px;">
        <div class="platewrapper">
            <headline title="空置房/转租预警" />
            <div class="cont-wrapper">
                <div style="height: 355px;">
                    <BasicTable @register="registerTable" />
                </div>
            </div>
        </div>
    </dv-border-box7>
</template>

<script setup lang="ts">
import { BasicTable, useTable } from '@/components/table';

const columns:any = [
    { title: '所属项目', dataIndex: 'unitName', ellipsis: true, width: 160 },
    { title: '房间号', dataIndex: 'roomName', ellipsis: true },
    { title: '户主', dataIndex: 'pname' },
    { title: '图片', dataIndex: 'picUrl', width: 45, dataFormat: { type: 'img', size: 26 } },
    { title: '疑似类型', dataIndex: 'type' },
    { title: '入住率', dataIndex: 'rate' },
    { title: '预警时间', dataIndex: 'time', width: 150 },
];

const getList = () => {
    return {
        data: [
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
            { unitName: '智慧物业项目', roomName: '12栋B单元-403房', pname: '蔡少芬', picUrl: 'https://img-nos.yiyouliao.com/alph/f3496e983d5d019d91d970e5500fadd7.jpeg?yiyouliao_channel=xiaomi_image', type: '疑似空置', rate: '0.00%', time: '2024-03-15 10:05:00' },
        ]
    };
};

// 页面表格属性配置
const [registerTable, { setTableData }] = useTable({
    api: getList,
    apiType: 'apis',
    dataField: 'data',
    columns, // 表格渲染参数配置
    immediate: true, // 是否立即执行
    canResize: true, // 是否显示滚动条
    ellipsis: true, // 文本超过宽度是否显示...
    isCanResizeParent: true, // 是否继承父级高度
    showIndexColumn: false, // 是否显示序号列
    pagination: false,
});
</script>